<template>
  <div class="panel-tab__content">
    <div class="panel-tab__content--title">
      <span> <menu-outlined class="icon" />消息列表 </span>
      <a-button size="small" type="primary" @click="openModel('message')">
        <template #icon><plus-outlined /></template>
        创建新消息
      </a-button>
    </div>

    <a-table :data-source="messageList" size="small" bordered>
      <a-table-column title="序号" width="60px">
        <template #customRender="{ index }">
          {{ index + 1 }}
        </template>
      </a-table-column>
      <a-table-column title="消息ID" data-index="id" :ellipsis="true" />
      <a-table-column title="消息名称" data-index="name" :ellipsis="true" />
    </a-table>

    <div class="panel-tab__content--title divider">
      <span> <menu-outlined class="icon" />信号列表 </span>
      <a-button size="small" type="primary" @click="openModel('signal')">
        <template #icon><plus-outlined /></template>
        创建新信号
      </a-button>
    </div>

    <a-table :data-source="signalList" size="small" bordered>
      <a-table-column title="序号" width="60px">
        <template #customRender="{ index }">
          {{ index + 1 }}
        </template>
      </a-table-column>
      <a-table-column title="信号ID" data-index="id" :ellipsis="true" />
      <a-table-column title="信号名称" data-index="name" :ellipsis="true" />
    </a-table>

    <a-modal v-model:open="modelVisible" :title="modelConfig.title" width="400px" :destroy-on-close="true" :mask-closable="false" @ok="addNewObject">
      <a-form :model="modelObjectForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" size="small">
        <a-form-item :label="modelConfig.idLabel">
          <a-input v-model:value="modelObjectForm.id" allow-clear />
        </a-form-item>
        <a-form-item :label="modelConfig.nameLabel">
          <a-input v-model:value="modelObjectForm.name" allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { PlusOutlined, MenuOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';

  export default {
    name: 'SignalAndMassage',
    components: {
      PlusOutlined,
      MenuOutlined,
    },
    data() {
      return {
        signalList: [],
        messageList: [],
        modelVisible: false,
        modelType: '',
        modelObjectForm: {},
      };
    },
    computed: {
      modelConfig() {
        if (this.modelType === 'message') {
          return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' };
        } else {
          return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' };
        }
      },
    },
    mounted() {
      this.initDataList();
    },
    methods: {
      initDataList() {
        this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
        this.messageIdMap = {};
        this.signalIdMap = {};
        this.messageList = [];
        this.signalList = [];
        this.rootElements.forEach((el) => {
          if (el.$type === 'bpmn:Message') {
            this.messageIdMap[el.id] = true;
            this.messageList.push({ ...el });
          }
          if (el.$type === 'bpmn:Signal') {
            this.signalIdMap[el.id] = true;
            this.signalList.push({ ...el });
          }
        });
      },
      openModel(type) {
        this.modelType = type;
        this.modelObjectForm = {};
        this.modelVisible = true;
      },
      addNewObject() {
        if (this.modelType === 'message') {
          if (this.messageIdMap[this.modelObjectForm.id]) {
            message.error('该消息已存在，请修改id后重新保存');
            return;
          }
          const messageRef = window.bpmnInstances.moddle.create('bpmn:Message', this.modelObjectForm);
          this.rootElements.push(messageRef);
        } else {
          if (this.signalIdMap[this.modelObjectForm.id]) {
            message.error('该信号已存在，请修改id后重新保存');
            return;
          }
          const signalRef = window.bpmnInstances.moddle.create('bpmn:Signal', this.modelObjectForm);
          this.rootElements.push(signalRef);
        }
        this.modelVisible = false;
        this.initDataList();
      },
    },
  };
</script>

<style scoped>
  .panel-tab__content {
    padding: 8px;
  }

  .panel-tab__content--title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .panel-tab__content--title.divider {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #eee;
  }

  .icon {
    margin-right: 8px;
    color: #555;
  }
</style>
